<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, watch, defineEmits, onMounted } from 'vue'
import getAssetsFile from '../utils/pub-use'
import { onlineImagePathWithFileId, gotoChatPage } from '../utils/lib'
import { type AIAgent } from '../utils/interface'
import agentMgr from '../utils/ai-agent'
import { useAuthStore } from '../stores/auth'
import { aiAgentStore } from '../stores/ai-agent'
import { type UserInfo } from '../utils/interface'
import { getConfigForKey } from '../utils/config'

let models2 = ref([] as AIAgent[][])
const emit = defineEmits(['toChat'])
const router = useRouter()

const authStore = useAuthStore()
const agentStore = aiAgentStore()

let userInfo: UserInfo = authStore.getUserInfo()
const refList = ref<HTMLElement[]>([]);
const overflown = ref([])
const supportedAgentKey = getConfigForKey('home_recommend_agent_keys')

onMounted(() => {
  agentMgr.searchAgents().then((data) => {
    let agents = data?.filter((item) => {
      return supportedAgentKey.includes(item.key)
    })
    loadData(agents)
  })
})

const getListRef = (el:any,rowIndex:number,cellIndex:number) => {
  if(el){
    refList.value[rowIndex * 3 + cellIndex] = el;
  }
}
const onmouseover = (rowIndex:number,cellIndex:number) => {
  const container = refList.value[rowIndex * 3 + cellIndex];
  overflown.value[rowIndex * 3 + cellIndex] = container && container.scrollHeight  > container.offsetHeight
}

const loadData = (models: AIAgent[]) => {
  let colNum = 3
  let modelTemp: Array<Array<AIAgent>> = []

  models.forEach((model: AIAgent, index) => {
    if (index % colNum === 0) {
      modelTemp.push([])
    }
    modelTemp[Math.floor(index / colNum)].push(model)
  })
  models2.value = modelTemp
}

watch(
  () => agentStore.myAgents,
  (newVal, oldVal) => {
    // console.log('My Agents changed:', newVal, oldVal)
    // loadData(newVal)
  }
)

const toChat = (model: any) => {
  gotoChatPage(router, model?.id)
  // emit('toChat', model, 'agent')
}

// loadData(agentStore.myAgents)
</script>

<template>
  <div class="init-page">
    <div class="wrap">
      <div class="content">
        <div class="title-container">
          <div class="title-line">
            <p>
              <span>您好，{{ userInfo.name }}</span>
            </p>
          </div>
          <div class="title-line">
            <p class="sub-title">
              <span>您的</span>
              <span class="high-light">AI助手</span>
              <span>已上线_</span>
            </p>
          </div>
        </div>
        <div class="actions-container">
          <el-row v-for="(row, rowIndex) in models2" :key="rowIndex" :gutter="16">
            <el-col
              v-for="(model, cellIndex) in row"
              :span="8"
              :key="cellIndex"
              @click="toChat(model)"
            >
              <div class="acitons-item-container">
                <div class="action-icon">
                  <img
                    :src="
                      model.logoUrl
                        ? onlineImagePathWithFileId(model.logoUrl)
                        : getAssetsFile(model.icon)
                    "
                  />
                </div>
                <div class="action-content">
                  <p class="title">{{ model.name }}</p>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="model.subTitle"
                    placement="bottom"
                    :disabled="!overflown[rowIndex * 3 + cellIndex]"
                  >
                    <p class="sub-title" @mouseover="onmouseover(rowIndex,cellIndex)" :ref="el => getListRef(el,rowIndex,cellIndex)">{{ model.subTitle }}</p>
                  </el-tooltip>
                  
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.init-page {
  --el-font-size-extra-larger: 30px;
  width: 98%;
  // background-color: var(--crp-bg-color);
  .wrap {
    margin-top: 10%;
    .content {
      .title-container {
        .title-line {
          // display: flex;
          // justify-content: center;
          font-size: var(--crp-font-size-titel-large);
          font-weight: 600;
          color: var(--crp-text-color-important);
          line-height: 48px;
          font-style: normal;

          .high-light {
            color: var(--crp-colors-primary-base);
          }

          p {
            margin: 0;
            span {
              font-size: var(--el-font-size-extra-larger);
              font-weight: 500;
            }
          }
          .sub-title{
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis
          }
        }
      }
      .actions-container {
        --crp-icon-size: 40px;
        margin-top: 40px;
        .acitons-item-container {
          display: flex;
          background-color: white;
          flex-direction: row;
          align-items: center;
          margin-bottom: 16px;
          padding: var(--crp-padding-base) var(--crp-padding-large);
          border-radius: 16px;

          height: 92px;
          background: #ffffff;
          box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.04);
          border-radius: 8px;
          cursor: pointer;
          .action-icon {
            display: flex;
            width: var(--crp-icon-size);
            height: var(--crp-icon-size);
            margin-right: 12px;
            background-color: cornflowerblue;

            border-radius: 8px;
            background-color: var(--crp-bg-color-area);
            border-radius: 6px;
            border: 1px solid var(--crp-border-color);
            padding: var(--crp-padding-small);
            img {
              width: 24px;
              height: 24px;
            }
          }
          .action-content {
            flex: 1;
            min-width: 0;
            .title {
              font-weight: 600;
              font-size: var(--crp-font-size-large);
              color: var(--crp-text-color-important);
              line-height: 18px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .sub-title {
              margin-top: 6px;
              font-weight: 400;
              font-size: var(--crp-font-size-base);
              color: var(--crp-text-color-secondary);
              line-height: 20px;
              height: 40px; 
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>
